<template>
  <nav class="title">
    <span class="active" @click="showAcheet('year')">学年：{{searchInfo.year}} <van-icon name="arrow-down" class="arrow-down" /></span>
    <span class="active" @click="showAcheet('major')">{{searchInfo.major || "专业"}} <van-icon name="arrow-down" class="arrow-down" /></span>
    <span class="active" @click="showAcheet('class')">{{searchInfo.class || "班级"}} <van-icon name="arrow-down" class="arrow-down" /></span>
  </nav>
</template>
<script>
export default {
  props: ["searchInfo", "pageInfo", "selectData", "getListData"],
  components: {},
  name: "",
  data() {
    return {
      type:"year",
    };
  },
  methods: {
    showAcheet(type){
      this.$store.state.dias.acheet.show=true
      this.type=type
      var columns=[]
      switch(type){
        case "year":columns=this.selectData.data2.map(val=>val.years);break;
        case "major":columns=this.selectData.data3;break;
        case "class":columns=[].concat(...this.selectData.data4);break;
      }
      this.$store.state.dias.acheet.columns=columns
      this.$store.state.dias.acheet.confirm=this.confirm
    },
    confirm(val){
      this.$set(this.searchInfo,this.type,val)
      this.$store.state.dias.acheet.show=false
      this.getSearch()
    },
    getSearch(){
     this.pageInfo.page=1
     this.getListData()
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  color: #fff;
  line-height: 90px;
  height: 90px;
  background-color: #00998d;
  display: flex;
  padding: 0 20px;
  justify-content: space-around;
}

.active:active {
  background-color: transparent;
}

.add-icon {
  width: 50px;
  height: 50px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
</style>